<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <th:block th:insert="~{include :: header('修改资料')}" />
    <th:block th:insert="~{include :: datetimepicker-css}" />
    <th:block th:insert="~{include :: summernote-css}" />
    <th:block th:insert="~{include :: select2-css}" />
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-3">
    <!-- Main content -->
    <div class="card mt-2">
        <div class="card-body">
            <form class="form-horizontal m" id="form-document-edit" th:object="${document}">
                <input id="id" name="id" th:field="*{id}" type="hidden">
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-sm-right">分类</label>
                    <div class="col-sm-2">
                        <div class="input-group">
                            <input id="categoryId" name="categoryId" type="hidden" th:value="*{categoryId}"/>
                            <input class="form-control" type="text" placeholder="请选择分类" id="categoryName" readonly="readonly" th:value="*{categoryName}">
                        </div>
                    </div>
                    <span class="form-text text-red">请选择所属分类</span>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-sm-right">类型</label>
                    <div class="col-sm-2">
                        <select id="typeId" name="typeId" class="form-control m-b" th:with="item = ${types}" required>
                            <option th:each="dict : ${item}" th:text="${dict.title}" th:value="${dict.ordinal}" th:selected="${dict.ordinal == document.typeId}"></option>
                        </select>
                    </div>
                    <span class="form-text text-red">请选择文件类型</span>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-sm-right">文件</label>
                    <div class="col-sm-4">
                        <input id="fileUrl" name="fileUrl" placeholder="请输入文件地址或上传" th:value="*{fileUrl}" class="form-control" type="text">
                        <input id="fileSize" name="fileSize" th:field="*{fileSize}" type="hidden">
                    </div>
                    <div class="col-sm-4">
                        <label for="file-upload" class="btn btn-success"><i class="fa fa-file-powerpoint-o"></i> 上传资料</label>
                        <input type="file" onchange="fileUpdate()" style="display: none" name="file-upload" id="file-upload" accept="file"/>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label is-required text-sm-right">标题</label>
                    <div class="col-sm-6">
                        <input id="title" name="title" th:field="*{title}" placeholder="请输入名称/标题" class="form-control" type="text" required>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-sm-right">封面</label>
                    <div class="col-sm-4">
                        <input id="cover" name="cover" placeholder="请输入封面地址或上传" th:value="*{cover}" class="form-control" type="text">
                    </div>
                    <div class="col-sm-4">
                        <label for="cover-upload" class="btn btn-danger"><i class="fa fa-image"></i> 上传图像</label>
                        <label class="btn btn-default" id="view-cover"><i class="fa fa-image"></i> 预览</label>
                        <input type="file" onchange="ImgUpdate()" style="display: none" name="cover-upload" id="cover-upload" accept="image/*"/>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-sm-right">详情</label>
                    <div class="col-sm-9">
                        <input id="content" th:value="*{intro}" name="intro" type="hidden">
                        <div id="editor" class="summernote" th:text="*{intro}"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-sm-right">标签</label>
                    <div class="col-sm-6">
                        <input id="tags" name="tags" th:field="*{tags}" placeholder="请输入标签" class="form-control" type="text">
                    </div>
                    <span class="form-text text-red">标签：多个以'逗号'分开</span>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label is-required text-sm-right">售价</label>
                    <div class="col-sm-2">
                        <input name="price"  class="form-control" th:value="*{price/100}"  type="text" required>
                    </div>
                    <label class="col-sm-2 col-form-label is-required text-sm-right">等级</label>
                    <div class="col-sm-2">
                        <select id="levelId" name="levelId" class="form-control m-b" th:with="item = ${members}" required>
                            <option value="0" th:selected="${0 == document.levelId}">普通</option>
                            <option th:each="dict : ${item}" th:text="${dict.title}" th:value="${dict.id}" th:selected="${dict.id == document.levelId}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label is-required text-sm-right">下载量</label>
                    <div class="col-sm-2">
                        <input name="downCount"  class="form-control" th:value="*{downCount}" type="text" required>
                    </div>
                    <label class="col-sm-2 col-form-label is-required text-sm-right">浏览量</label>
                    <div class="col-sm-2">
                        <input name="viewCount" class="form-control" th:value="*{viewCount}" type="text" required>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label is-required text-sm-right">点赞量</label>
                    <div class="col-sm-2">
                        <input name="likeCount"  class="form-control" th:value="*{likeCount}" type="text" required>
                    </div>
                    <label class="col-sm-2 col-form-label is-required text-sm-right">属性</label>
                    <div class="col-sm-2 pt-2">
                        <label for="isElite"><input type="checkbox" value="1" name="isElite" id="isElite" th:checked="*{isElite==1}"> 推荐</label>
                        <label for="isTop"><input type="checkbox" value="1" name="isTop" id="isTop" th:checked="*{isTop==1}"> 固顶</label>
                    </div>
                </div>
                <div class="row">
                    <label class="col-sm-2"></label>
                    <div class="col-sm-10">
                        <button type="button" class="btn btn-primary" onclick="submitDocument()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                        <button type="button" class="btn btn-danger" onclick="parent.layer.closeAll()"><i class="fa fa-reply-all"></i>关 闭 </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: datetimepicker-js}" />
<th:block th:insert="~{include :: summernote-js}" />
<th:block th:insert="~{include :: select2-js}" />
<script th:inline="javascript">
    var prefix = "/document";
    var prefixCategory = "/category";
    var channelId = [[${document.channelId}]];

    $(function() {
        /*分类-新增-选择父部门树*/
        $('#categoryName').click(function () {
            var options = {
                title: null,
                width: "380px",
                url: prefixCategory + "/select.html?categoryId=" + $("#categoryId").val() + "&channelId=" + channelId,
                callBack: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    setCategory(body.find('#categoryId').val(), body.find('#categoryName').val())
                    layer.close(index);
                }
            };
            $.modal.openOptions(options);
        });

        $('.summernote').summernote({
            placeholder: '请输入课程的详细介绍，支持html语法',
            height : 192,
            lang : 'zh-CN',
            followingToolbar: false,
            callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0], this);
                }
            }
        });
        var content = $("#content").val();
        $('#editor').summernote('code', content);

        $('#view-cover').click(function () {
            var imgSrc = $('#cover').val();
            if (imgSrc.length < 1) {
                layer.msg('图片地址不存在！');
            } else {
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim',
                    title: false,
                    area: ['480', '365px'],
                    content: '<img src="' + imgSrc + '" />'
                });
            }
        });
    });
    //下拉框选中事件
    function setCategory(id, name) {
        $("#categoryId").val(id);
        $("#categoryName").val(name);
    }
    //下拉框选中后执行事件
    function changeSellType(obj) {
        if (obj.value === 'LIVE') {
            $("#liveDisplay").show();
        } else {
            $("#liveDisplay").hide();
        }
    }

    //资料上传
    function fileUpdate() {
        var file = $('#file-upload')[0].files[0];
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            url: "/upload/temp/file.json",
            data: formData,
            type: "post",
            processData: false,
            contentType: false,
            dataType:"json",
            mimeType:"multipart/form-data",
            success: function(result) {
                console.log(result)
                if(result.code === 0){
                    $("#fileUrl").val(result.data.src);
                    $("#title").val(result.data.title);
                    $("#fileSize").val(result.data.size);
                    layer.msg('上传成功', {icon: 1});
                }else{
                    layer.msg('上传失败', {icon: 2});
                }
            }
        })
    }

    //图片上传
    function ImgUpdate() {
        var file = $('#cover-upload')[0].files[0];
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            url: "/upload/temp/image.json",
            data: formData,
            type: "post",
            processData: false,
            contentType: false,
            dataType:"json",
            mimeType:"multipart/form-data",
            success: function(result) {
                if(result.code === 0){
                    $("#cover").val(result.data.src);
                    layer.msg('上传成功', {icon: 1});
                }else{
                    layer.msg('上传失败', {icon: 2});
                }
            }
        })
    }
    // 富文本上传文件
    function sendFile(file, obj) {
        var data = new FormData();
        data.append("file", file);
        $.ajax({
            type: "POST",
            url: "/upload/image.json",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(result) {
                if (result.code === 0) {
                    $(obj).summernote('editor.insertImage', result.data.src, result.data.title);
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("图片上传失败。");
            }
        });
    }

    //修改保存
    function submitDocument() {
        var sHTML = $('.summernote').summernote('code');
        $("#content").val(sHTML);
        var categoryId = $('#categoryId').val();
        if (categoryId === '' || categoryId === '0') {
            return layer.msg('请先选择所属分类！', {icon: 2});
        }
        if ($('#title').val().length < 3) {
            return layer.msg('请输入标题，且必需大于3个字符！', {icon: 2});
        }
        $.modal.loading();
        var data = $("#form-document-edit").serializeArray();
        $.post(prefix + "/edit.json", data, function (result) {
            if (result.code === 0) {
                $.modal.msgSuccess(result.msg)
                setTimeout(function () {
                  $.modal.close();
                  parent.location.reload()
                },1000)
            } else {
                $.modal.msgError(result.msg);
            }
        });
    }
</script>
</body>
</html>